<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close
             @closed="$emit('closed')" align-center>
    <el-container>
      <el-header>
        <div class="left-panel">
          <el-button type="primary" @click="back" v-auth="'process.add'">确定</el-button>
          <el-button type="primary" @click="add">新增工序</el-button>
        </div>
        <div class="right-panel">
          <div class="right-panel-search" style="flex-wrap:wrap;">
            <el-input style="margin:5px 10px" v-model="search.working_name" placeholder="请输入工序名称" clearable @keyup.enter="upsearch"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
          </div>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" row-key="id" stripe remoteSort remoteFilter height="550" :params="query">
          <el-table-column type="selection" width="50" reserve-selection></el-table-column>
          <el-table-column label="工序名称" prop="working_name" align="center"></el-table-column>
          <el-table-column label="工序备注" prop="remark" align="center">
            <template #default="scope">
              <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.remark">
                <template #reference>
                  <el-button style="padding: 5px 0;font-size: 12px" text class="m-2">{{ scope.row.remark.substring(0, 10) }}</el-button>
                </template>
              </el-popover>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
    </template>
    <save-add v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-add>
  </el-dialog>
</template>

<script>
import saveAdd from './save.vue'

export default {
  components: {saveAdd},
  emits: ['success', 'closed'],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: '选择工序',
        edit: '编辑工序',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      apiObj: this.$API.goods.process.list,
      selection: [],
      search: {
        working_name: null,
      },
      dialog: {
        save: false,
      },
    }
  },
  mounted() {
  },
  methods: {
    // 显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this
    },
    // 表单注入数据
    setData(data) {
      //可以和上面一样单个注入，也可以像下面一样直接合并进去
      this.form.id = data.id
    },
    selectAll() {
      this.$message.error("只能单选！")
      this.$refs.table.clearSelection()
    },
    selectionChange(selection) {
      // this.$emit('success', selection)
      this.selection = selection
      // this.visible = false;
    },
    clearSearch() {
      for (const key in this.search) {
        this.search[key] = "";
      }
      this.$refs.table.upData(this.search)
    },
    // 选中返回
    back() {
      this.$emit('success', this.selection)
      this.visible = false;
    },
    //新增
    add() {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveDialog.open('add')
      })
    },
    // 更新新增
    handleSuccess(data, mode) {
      if (mode == 'add') {
        this.$refs.table.refresh()
      } else if (mode == 'edit') {
        this.$refs.table.refresh()
      }
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search)
    },
    refresh() {
      for (const key in this.search) {
        this.search[key] = "";
      }
      this.$refs.table.upData(this.search)
    },
  }
}
</script>

<style></style>
